<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6默认值参数和可变参数</title>
</head>
<body>
<script>
    //promise的三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)
    //promise常见方法 1. Promise.resolve() 2. Promise.reject() 3. Promise.all() 4. Promise.race() 5.then() 6.catch() 7.finally()

    //1. Promise.resolve()
    //Promise.resolve()方法可以将现有对象转为Promise对象。
    //该方法的结果将会被传递给then()方法。
    let promise = Promise.resolve("foo"); //将一个字符串转化为Promise对象,该promise对象的状态为fulfilled。
    console.log(promise)

    let promise1 =new Promise(resolve =>{
        //执行异步操作逻辑
        return resolve("foo")
    }).then(result => console.log(result)) //要拿到异步操作的结果，需要在then()方法中处理。
    console.log(promise1)

    //2. Promise.reject()
    //Promise.reject()方法返回一个新的Promise对象，该对象会变为rejected状态。
    //该方法的结果将会被传递给catch()方法。

    // let promise2 = Promise.reject(new Error("出错了"));
    // console.log(promise2) //该promise对象的状态为rejected。

    new Promise((reject)=>{
        //执行异步操作逻辑
        return reject(new Error("出错了"))
    }).catch((error)=>{
        console.log(error) //要拿到异步操作的错误信息，需要在catch()方法中处理。
    })

    //3. Promise.all()
    //多个异步并任务全部执行成功才算成功，否则失败。类似事务

    let p1 = new Promise((resolve, reject) => {
        //执行异步操作逻辑
        const person={
            name:"张三",
            age:20
        }
        resolve(person)
    });

    let p2 = new Promise((resolve, reject) => {
        //执行异步操作逻辑
        const address = {
            city:"北京",
        }
        resolve(address)
    })
    let p3 = new Promise((resolve, reject) => {
        //执行异步操作逻辑
        reject("出错了")
    })
    Promise.all([p1, p2, p3]).then(results => {
        console.log(results) //拿到全部成功的结果
    }).catch(error=>{
        console.log(error) //拿到失败的结果
    })


    //4. Promise.race()
    // 使用场景，如果一个任务需要在执行超时之后,做相应的操作时，可以使用该方法

    function uploadImg(imageUrl){
        return new Promise((resolve, reject) => {
            //执行相应的上传图片的操作
            const img = new Image();
            setTimeout(()=>{

            },1000)
            img.onload=function(){

                return resolve(img)
            }
            img.src = imageUrl;

        })
    }
    function timeout(time){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //将超时的逻辑放在这里执行
                reject("超时了")
            })
        },time)
    }
    //其中数组中的两个方法相当于竞争这个promise的状态，如果这个状态一旦改变将不可以逆转，也就是说，两个方法只有一个会执行。
    Promise.race([uploadImg("https://www.baidu.com/img/flexible/logo/pc/result.png"),timeout(10)]).then(result => {
        console.log(result) //拿到未超时的结果
        document.body.appendChild(result);
    }).catch(error => {
        console.log(error)
    })//拿到超时的错误信息


</script>
</body>
</html>